<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8" />
        <script type="text/javascript" src="../public/cdn/vue/2.6.10/vue.js"></script>
        <script type="text/javascript" src="../public/cdn/vue-router/3.0.1/vue-router.min.js"></script>
    </head>

    <body>
        <div id="app">
            <h1>在界面中拥有多个单独命名的视图，如果 router-view 没有设置名字，那么默认为 default</h1>
            <p>当前路由：{{$route.path}}</p>
            <router-link to="/multi">/multi</router-link><br/>
            <router-link to="/alive">/alive</router-link><br/>
            <router-link to="/auth">/auth</router-link><br/>
            <hr/>

            <!-- 通过切换路由而被隐藏了的路由组件，默认是被销毁的，如果需要缓存下来，需要在路由组件中使用keep-alive包裹（通过include属性声明要缓存的组件的名字，不指定则缓存全部组件）
                注意：keep-alive里不能放多个<router-view>，否则除了第一个之外的路由视图将会失效
             -->
            <keep-alive include="Alive">
                <!-- 路由出口，匹配到的组件将渲染到这里 -->
                <router-view></router-view>
            </keep-alive>
            <router-view name="view1"></router-view>
            <router-view name="view2"></router-view>
        </div>
    </body>

    <script>
        var router = new VueRouter({
            routes: [
                {
                    path: '/multi',
                    components: {
                        default: { template: '<p>这里是默认路由渲染的地方</p>' },
                        view1: { template: '<p>view1</p>' },
                        view2: { template: '<p>view2</p>' }
                    }
                },
                {
                    path: '/alive',
                    components: {
                        default: { template: `<div><p>测试keep-alive缓存路由</p><input type="text" value="2" /></div>`, name: 'Alive' }
                    }
                },
                {
                    path: '/auth',
                    components: {
                        default: { template: `<div><p>要授权才能看到这个</p></div>` }
                    },
                    // meta可以自定义一些自己的属性，例如，是否需要授权
                    meta: {
                        auth: true
                    },
                    beforeEnter(to, from, next) {
                        // 独享路由守卫，只有beforeEnter而没有afterEnter
                        console.log('beforeEnter')
                        next();
                    }
                }
            ]
        });
        // 添加一个全局前置路由守卫，能在路由切换之前做拦截操作；初始化和每次路由切换之前被调用
        router.beforeEach((to, from, next) => {
           console.log(`路由准备从${from.path}跳转到${to.path}`)
            console.log(to)
            if (to.meta.auth) {
                alert('没权限访问')
                return;
            }
            next();  // 放行
        });
        // 添加一个全局后置路由守卫，会在路由切换之后做拦截操作；初始化和每次路由切换之后被调用
        router.afterEach((to, from) => {
            console.log(`路由从${from.path}跳转到${to.path}成功`)
            document.title = to.path;
        });
        const app = new Vue({
            el: '#app',
            router: router,
        });
        // 编程式导航，push会向history添加新的路由，replace不会添加到history中
        router.push('/multi');
    </script>

</html>
